<template>
    <div>
        <el-form ref="formRef" :model="meshIns" label-width="auto"> 
            <el-form-item label="控件类型" prop="type">
                {{ meshIns&&meshIns.object?meshIns.object.type:'' }}
            </el-form-item>
            <el-form-item label="信息" prop="zone">
                {{ meshIns&&meshIns.object?meshIns.object.userData.info:'' }}
            </el-form-item>
            <el-form-item label="偏移" prop="time">
                <div class="">
                    <div>X:<el-input-number v-model="meshIns.object.position.x" placeholder="" type="number" @change="dataChanged"/></div>
                    <div>Y:<el-input-number v-model="meshIns.object.position.y" placeholder="" type="number" @change="dataChanged"/></div>
                    <div>Z:<el-input-number v-model="meshIns.object.position.z" placeholder="" type="number" @change="dataChanged"/></div>
                </div>
            </el-form-item>
            <el-form-item label="尺寸" prop="time">
                <div class="">
                    <div>长:<el-input-number v-model="meshIns.object.userData.info.w" placeholder="" type="number" @change="dataChanged"/></div>
                    <div>宽:<el-input-number v-model="meshIns.object.userData.info.h" placeholder="" type="number" @change="dataChanged"/></div>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
    const props = defineProps({
        meshIns: Object
    })
    watch(() => props.meshIns.object.position, (newVal) => {
        console.log(newVal)
    },{deep:true})

    const dataChanged = () => {
        props.meshIns.value.object.updateMatrix()
    }
</script>
<style lang="scss">
</style>